<template>
    <view class="p-box">
        <view
            class="uploader-box"
            :style="isSys ? 'margin-bottom: 20px;' : ''"
            v-for="(item, index) in photoArr"
            :key="index"
            @mousedown.stop.prevent="onMouseDown(item)"
            @mouseup.stop.prevent="onMouseUp(item)"
        >
            <view class="img-box">
                <text class="icon-font search-icon">&#xe606;</text>
                <image
                    :src="item.url"
                    mode="aspectFill"
                    @click="chooseImage(item, index)"
                    v-if="type == 2 && is_good == 2"
                ></image>
                <image
                    :src="item.url"
                    mode="aspectFill"
                    @click.stop.prevent="chooseImage(item, index)"
                    v-else
                ></image>
            </view>
            <view
                class="del-icon"
                v-if="
                    (type == 1 || type == 4 || (type == 2 && is_good == 2)) &&
                    item.url
                "
            >
                <text
                    class="icon-font txt-icon"
                    @click="del(index, item)"
                    v-if="item.url"
                    >&#xe64a;</text
                >
            </view>
            <!-- 只有产品图片才显示 -->
            <view
                class="s-s-btn"
                v-if="isSys && type == 1 && item.url"
                @click="selectMarchSku(index, item)"
                >{{ item.skuTitles ? item.skuTitles : "选择" }}</view
            >
			<!-- <text>{{item.url}}</text> -->
        </view>
    </view>
</template>

<script>
import staticConst from "../../js/const/StaticConst.js";
import uploadPic from "../../js/upload/UploadPic.js";

import debug from "../../js/debug/Debug.js";

import goodsCtrl from "../../js/gd/GoodsCtrl.js";
import projectCtrl from "../../js/project/GoodsCtrl.js";

import eventCtrl from "../../js/event/EventCtrl.js";

import draggable from "vuedraggable"; //拖动插件

const MAX_LEN = 9;
const imageWidth = 100;
export default {
    components: {
        draggable,
    },
    props: [
        "isSys",
        "actType",
        "pList",
        "parentIdx",
        "tabId",
        "is_good_type",
        "itemId",
        "batchid",
        "idyun",
        "activeId",
    ], //产品详情专用
    data() {
        return {
            photoArr: this.pList ? this.pList : [],
            imgWidth: 200,
            imgHeight: 200,
            curItem: {},
            curIndex: -1,
            type: this.actType ? this.actType : 1,
            is_good: this.is_good_type ? this.is_good_type : 1,
            oldPhoto: {},
            mouseDownItem: {},
        };
    },
    created() {},

    watch: {
        pList: {
            handler(newValue, oldValue) {
                this.photoArr = newValue;
                this.$forceUpdate();
            },
        },
    },

    methods: {
        onMove(e, originalEvent) {
            if (e.relatedContext.element.id == this.photoArr.length - 1)
                return false;
            if (
                e.draggedContext.element.id == this.photoArr.length - 1 &&
                this.photoArr[this.photoArr.length - 1].url == ""
            )
                return false;
        },
        onMouseDown(item) {
            if (item && item.url) this.mouseDownItem = item;
        },

        onMouseUp(item) {
            if (item && item.url) {
                let url = item.url;
                let imgs = item.imgs;
                let imgs_base = item.imgs_base;
                let isDel = item.isDel;
                let id = item.id;
                let skuIds = item.skuIds;
                let skuTitles = item.skuTitles;

                item.url = this.mouseDownItem.url;
                item.imgs = this.mouseDownItem.imgs;
                item.imgs_base = this.mouseDownItem.imgs_base;

                item.isDel = this.mouseDownItem.isDel;
                item.id = this.mouseDownItem.id;
                item.skuIds = this.mouseDownItem.skuIds;
                item.skuTitles = this.mouseDownItem.skuTitles;

                this.mouseDownItem.url = url;
                this.mouseDownItem.imgs = imgs;
                this.mouseDownItem.imgs_base = imgs_base;

                this.mouseDownItem.isDel = isDel;
                this.mouseDownItem.id = id;
                this.mouseDownItem.skuIds = skuIds;
                this.mouseDownItem.skuTitles = skuTitles;

                if (this.type == staticConst.UPLOAD_GOODS)
                    if (this.is_good == 1) {
                        goodsCtrl.switchPhoto(this.photoArr);
                    } else {
                        projectCtrl.switchPhoto(this.photoArr);
                    }
            }
        },

        /****初始化数据*  type =1 编辑产品头部   type =2 编辑产品更多详情  ****/
        async initPhotoData(data) {
            this.photoArr = [];
            if (data) this.type = data.type;
            if (
                this.type == staticConst.UPLOAD_AVATAR || //其他上传图片
                this.type == staticConst.UPLOAD_REMASK || //备注图片
                this.type == staticConst.UPLOAD_OTHER || //上传客户头像
                this.type == staticConst.UPLOAD_ORDER_REMASK ||
                this.type == staticConst.UPLOAD_INTER_ACTIVE
            ) {
                this.photoArr = data.list;
            } else if (this.type == staticConst.UPLOAD_GOODS) {
                //产品图片数组
                if (this.is_good == 1) {
                    this.photoArr = await goodsCtrl.getGdsPhotos();
                } else {
                    this.photoArr = await projectCtrl.getGdsPhotos();
                }
            }
        },

        clear() {
            this.photoArr = [];
        },

        setPhotoArr(arr) {
            this.photoArr = arr;
            this.$forceUpdate();
        },

        /******选择编辑图片******/
        chooseImage(item, index) {
            console.log(item,index,'图片');
            if (this.isMove) return;
            let that = this;
            this.curIndex = index;
            this.curItem = item;
            this.oldPhoto.url = item.url;
            this.oldPhoto.imgs_base = item.imgs_base;
            this.oldPhoto.imgs = item.imgs;
            this.oldPhoto.isDel = item.isDel;
            this.oldPhoto.id = item.id;
            this.oldPhoto.skuIds = item.skuIds;
            this.oldPhoto.skuTitles = item.skuTitles;
            uploadPic.chooseImage(
                callBack,
                this.type,
                index,
                this.parentIdx,
                this.tabId,
                this.is_good,
                this.itemId,
                this.batchid,
                this.idyun,
                this.activeId
            );
            function callBack(data) {
				
				// console.log(that.type , "    上传图片成功:addPhoto callBack():data====:",data,item);
				
                item.url = data.url;
                item.type = data.type;
                item.index = index;
                if (
                    that.type == staticConst.UPLOAD_OTHER &&
                    that.is_good == 1
                ) {
                    item.parentIdx = data.parentIdx;
                    // item.tabId = data.tabId;
                } else if (that.is_good == 2) {
                    item.parentIdx = data.parentIdx;
                    if (that.photoArr.length < MAX_LEN && that.checkUrl())
                        that.photoArr.push({
                            url: "",
                            imgs_base: "",
                            imgs: "",
                            isDel: false,
                        });
                }
                if (
                    that.type == staticConst.UPLOAD_OTHER ||
                    that.type == staticConst.UPLOAD_GOODS
                )
                    uni.$emit(eventCtrl.EDIT_PHOTO_EVENT, item);
                else if (that.type == staticConst.UPLOAD_REMASK) {
                    uni.$emit(eventCtrl.EDIT_MASKER_PHOTO_EVENT, item);
                } else if (
                    that.type == staticConst.UPLOAD_AVATAR ||
                    that.type == staticConst.UPLOAD_ORDER_REMASK ||
                    that.type == staticConst.UPLOAD_INTER_ACTIVE
                ) {
                    that.$emit("uploadAavatar", item, this.batchid);
                }
            }
        },

        /*****确认图片******/
        confirm(data, successBack) {
            this.curItem.url = data.tempFilePath;
			console.log("data==============:",data)
            if (
                this.type == staticConst.UPLOAD_GOODS ||
                this.type == staticConst.UPLOAD_REMASK ||
                this.type == staticConst.UPLOAD_ORDER_REMASK
            ) {
                if (this.photoArr.length < MAX_LEN && this.checkUrl())
                    this.photoArr.push({
                        url: "",
                        imgs_base: "",
                        imgs: "",
                        isDel: false,
                    });
            }

            uploadPic.creatCanvas(this.curItem.url, data.original, successBack);
        },

        checkUrl() {
            let len = this.photoArr.length;
            for (let i = 0; i < len; i++) {
                let obj = this.photoArr[i];
                if (obj.url == "") {
                    return false;
                }
            }
            return true;
        },

        /***取消编辑图片*****/
        cancel() {
            this.photoArr[this.curIndex].url = this.oldPhoto.url;
            this.photoArr[this.curIndex].imgs_base = this.oldPhoto.imgs_base;
            this.photoArr[this.curIndex].imgs = this.oldPhoto.imgs;
            this.photoArr[this.curIndex].isDel = this.oldPhoto.isDel;
            this.photoArr[this.curIndex].skuIds = this.oldPhoto.skuIds;
            this.photoArr[this.curIndex].skuTitles = this.oldPhoto.skuTitles;
            this.oldPhoto = {};
            this.curItem = {};
            this.curIndex = -1;
        },

        /*****删除列表图片*****/
        del(index, item) {
            if (this.type == 1) {
                if (this.is_good == 1) {
                    this.photoArr = goodsCtrl.delGdsPhoto(index);
                } else {
                    this.photoArr = projectCtrl.delGdsPhoto(index);
                }
            } else if (this.type == 2) {
                //详情列表暂时不做多张图片
                this.$emit("deiimgFun", item);
            } else if (this.type == 4) {
                if (
                    this.photoArr.length == 9 &&
                    this.photoArr[this.photoArr.length - 1].url
                ) {
                    this.photoArr.push({
                        url: "",
                        imgs_base: "",
                        imgs: "",
                        isDel: false,
                    });
                }
                this.photoArr.splice(index, 1);
                this.$emit("deiimgFun", item);
            }
        },

        /**********************/
        selectMarchSku(index, item) {
            let data =
                this.is_good == 1
                    ? goodsCtrl.getSUMatchImgList(index, item.skuIds)
                    : projectCtrl.getSUMatchImgList(index, item.skuIds);
            this.$emit("showSkuBindImg", data);
        },
    },
};
</script>
<style lang="scss">
.test-img {
    position: absolute;
    top: 10upx;
    left: 10upx;
}
.p-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 10px;
    .uploader-box {
        height: 100px;
        width: 100px;
        margin-right: 20px;
        margin-top: 20px;
        position: relative;
        .img-box {
            height: 100px;
            width: 100px;

            position: relative;
            border: 1px #eee solid;
            color: #999;
            text-align: center;
            align-items: center;
            border-radius: 8px;
            justify-content: center;
            cursor: pointer;
            overflow: hidden;
            .search-icon {
                font-size: 20px;
                line-height: 92px;
            }
            image {
                width: 100%;
                height: 100%;
                position: absolute;
                border-radius: 8px;
                top: 0;
                left: 0;
            }
        }

        .del-icon {
            color: red;
            display: flex;
            top: -8px;
            right: -7px;
            position: absolute;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            height: 18px;
            width: 18px;
            border-radius: 12px;
            cursor: pointer;
            .txt-icon {
                font-size: 24px;
            }
        }

        .s-s-btn {
            text-align: center;
            padding: 5px 0;
            max-width: 100px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #3388ff;
            cursor: pointer;
        }
    }
    .uploader-box:first-child {
        margin-left: 0px;
    }
}
</style>